{extend name="base" /}

{block name="content"}

<link href="/static/js/jstree/themes/default/style.min.css" rel="stylesheet" />

<div class="ml-64">

<form action="{:admin_url('add')}" method="post" name="form_add" id="form">
	<div class="p-4">
	  <ul class="md:flex-row nav nav-tabs flex flex-col flex-wrap list-none border-b-0 pl-0 mb-4" id="add-tab"
	    role="tablist">
	    <li class="nav-item" role="presentation">
	      <a href="#add-0" class="
	        nav-link
	        block
	        font-medium
	        text-xs
	        leading-tight
	        uppercase
	        border-x-0 border-t-0 border-b-2 border-transparent
	        px-6
	        py-3
	        my-2
	        hover:border-transparent hover:bg-gray-100
	        focus:border-transparent
	        active
	      " id="add-0-tab" data-tab="0" data-bs-toggle="pill" data-bs-target="#add-0" role="tab" aria-controls="add-0"
	        aria-selected="true">角色信息</a>
	    </li>
	    <li class="nav-item" role="presentation">
	      <a href="#add-1" class="
	        nav-link
	        block
	        font-medium
	        text-xs
	        leading-tight
	        uppercase
	        border-x-0 border-t-0 border-b-2 border-transparent
	        px-6
	        py-3
	        my-2
	        hover:border-transparent hover:bg-gray-100
	        focus:border-transparent
	      " id="add-1-tab" data-tab="1" data-bs-toggle="pill" data-bs-target="#add-1" role="tab" aria-controls="add-1"
	        aria-selected="true">访问授权</a>
	    </li>
	  </ul>
	  <div class="tab-content" id="add-tabContent">
	    <div class="tab-pane fade show active" id="add-0" role="tabpanel" aria-labelledby="add-1-tab">
	      	{:yoyo_render('select', ['name'=>'pid', 'label'=>'所属角色', 'options'=>$role_list])}
			{:yoyo_render('input', ['name'=>'name', 'label'=>'角色名称'])}
			{:yoyo_render('textarea', ['name'=>'description', 'label'=>'角色描述', 'rows'=>4])}
			{:yoyo_render('radio', ['name'=>'access', 'inline'=>true, 'label'=>'是否可登录后台', 'options'=>['否', '是'], 'value'=>1])}
			{:yoyo_render('input', ['name'=>'sort', 'label'=>'排序', 'type'=>'number', 'value'=>100])}
	    </div>
	    <div class="tab-pane fade " id="add-1" role="tabpanel" aria-labelledby="add-1-tab">
	    	<div class="row data-table-toolbar">
	            <div class="col-sm-12">
	                <div class="toolbar-btn-action">
	                	<button id="check-all" type="button" class="inline-block px-6 py-2.5 bg-blue-400 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-500 hover:shadow-lg focus:bg-blue-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-600 active:shadow-lg transition duration-150 ease-in-out">全选</button>

	                	<button id="uncheck-all" type="button" class="inline-block px-6 py-2.5 bg-red-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out">取消全选</button>

	                	<button id="expand-all" type="button" class="inline-block px-6 py-2.5 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-600 hover:shadow-lg focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-700 active:shadow-lg transition duration-150 ease-in-out">展开所有节点</button>

	                	<button id="collapse-all" type="button" class="inline-block px-6 py-2.5 bg-yellow-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-yellow-600 hover:shadow-lg focus:bg-yellow-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-yellow-700 active:shadow-lg transition duration-150 ease-in-out">收起所有节点</button>

	                    <span class="mb-3 xl:w-96">
	                    	<input type="text" class="
								form-control
								inline-block
								w-18
								px-3
								py-1.5
								text-base
								font-normal
								text-gray-700
								bg-white bg-clip-padding
								border border-solid border-gray-300
								rounded
								transition
								ease-in-out
								m-0
								focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
					        " id="search-auth" 
								onkeydown="if(event.keyCode === 13){return false;}"
					        	placeholder="输入关键字搜索" />
	                    </span>
	                </div>
	            </div>
	        </div>
	        {notempty name="menus"}
	        <div class="block">
	            <div class="block-content tab-content">
	                {volist name="menus" id="vo"}
	                <div class="tab-pane {$curr_tab == $key ?= 'active'}" id="{$key}">
	                    <div class="push js-tree" data-tab="{$i-1}">{$vo.menus|raw|default=''}</div>
	                </div>
	                {/volist}
	            </div>
	        </div>
	        {else/}
	        <p class="text-center text-muted">暂无可分配节点</p>
	        {/notempty}
	    </div>
	  </div>
	</div>
	<div class="clear-both mt-12">
		<button type="submit" class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">提交</button>
	</div>
</form>
</div>

{/block}

{block name="script"}
<script src="/static/js/jstree/jstree.min.js"></script>
<script src="/static/js/role.js"></script>
{/block}